<template>
    <div class="main">
        <van-nav-bar title="创建订单" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-cell icon="location-o" :label="userinfo.address" is-link @click="handleAddress">
            <template #title>
                <span style="margin-right:10px">{{ userinfo.contactor_name }}</span>
                <span>{{ userinfo.phone }}</span>
            </template>
        </van-cell>
        <img src="@/assets/line.png" alt="" style="width: 100%;height: 2px;">
        <div class="goodsSection" v-if="orderinfo.length==0">
            <img :src="goods_image" alt="" style="width: 70px;height: 70px;">
            <div class="goodsRight">
                <p class="title">{{ goodsInfo.title }}</p>
                <span class="desc" style="color: #909399; font-size: 13px;">{{ skuinfo.value }}</span>
                <p style="margin-top: 5px;">￥{{ skuinfo.price }} &nbsp;
                    <span style="color: #606266; font-size: 13px;">x
                        {{ this.$route.query.quantity }}
                    </span>
                </p>
            </div>
        </div>
        <template v-else>
            <div class="goodsSection" v-for="item in orderinfo" :key="item.id">
                <img :src="item.product.image[0]" alt="" style="width: 70px;height: 70px;">
                <div class="goodsRight">
                    <p class="title">{{ item.product.title }}</p>
                    <span class="desc" style="color: #909399; font-size: 13px;">{{ item.sku.value }}</span>
                    <p style="margin-top: 5px;">￥{{ item.sku.price }} &nbsp;
                        <span style="color: #606266; font-size: 13px;">x
                            {{ item.quantity }}
                        </span>
                    </p>
                </div>
            </div>
        </template>
        
        <van-list>
            <van-cell title="商品金额" :value="'￥'+priceinfo.order_price"/>
            <van-cell title="优惠金额" :value="'-￥'+priceinfo.discount_price"/>
            <van-cell title="运费" value="￥免运费"/>
            <van-field v-model="text" label="备注" placeholder="请填写备注信息"/>
        </van-list>
        <div class="footer">
            <p>
                实付款：<span style="color: #fa436a;font-weight: 600;">￥{{ priceinfo.order_price }}</span>
            </p>
            <span class="order" @click="handleSubmit">提交订单</span>
        </div>
    </div>
</template>
<script>
import {getAddress} from "@/api/address"
import {getCarts} from "@/api/cart"
import { getPrice } from "@/api/order"
export default {
   data() {
      return {
        userinfo:{},
        goodsInfo:{},
        skuinfo:{},
        goods_image:"",
        priceinfo:{},
        text:"",
        orderinfo:[]
      }
   },
   created(){
        getAddress().then(res=>{
            this.userinfo = res.data.data[0];
            let info = {address_id:this.userinfo.id,desc:"",quantity:this.$route.query.quantity,sku_id:this.$route.query.sku_id};
            getPrice(info).then(res=>{
                this.priceinfo = res.data.data;
            })
        })
        getCarts(this.$route.query).then(res=>{
            if(res.data.data.length>1){
                this.orderinfo = res.data.data.filter(item=>item.is_selected==1);
            }else{
                this.goodsInfo = res.data.data[0].product;
                this.skuinfo = res.data.data[0].sku;
                this.goods_image = this.goodsInfo.image[0];
                this.orderinfo = res.data.data
            }
        })
        
   },
   computed:{
   },
   methods:{
    onClickLeft(){
        this.$router.go(-1)
    },
    handleAddress(){
        this.$router.push("/address")
    },
    handleSubmit(){
        if(this.$route.query.quantity){
            let pay = {address_id:this.userinfo.id,quantity:this.$route.query.quantity,sku_id:this.skuinfo.id};
            this.$router.push({path:"/pay",query:pay});
        }else{
            this.$toast.success("订单已提交");
            this.$router.push("/user")
        }
        
    }
   },
}
</script>
<style scoped>
    .main{
        background-color: #F8F8F8;
        padding-bottom: 100px;
    }
    .goodsSection{
        height: 81px;
        margin: 10px auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
    }
    .goodsSection .goodsRight{
        display: flex;
        flex-direction: column;
    }
    .goodsRight .title{
        width:250px;
        height: 20px;
        overflow: hidden;
        white-space:nowrap ;
        text-overflow: ellipsis;
        font-size: 15px;
        color: #303133;
    }
    .footer{
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        box-shadow: 1px 3px 3px 3px rgba(0, 0, 0, .2);
        background-color: #fff;
    }
    .footer p{
        width: 60%;
        height: 45px;
        line-height: 45px;
        padding-left: 5%;
    }
    .footer .order{
        display: block;
        width: 35%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background-color: #fa436a;
        color: #fff;
    }
</style>
